<template>
  <div class="chart-container">
    <div ref="chartRef" class="chart"></div>
    <div v-if="$route.path === '/framework'" class="conclusion-box">
      <h3>组织规模与协作工具使用情况</h3>
      <div v-html="conclusionContent"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import * as echarts from "echarts";
import axios from "axios";

const chartRef = ref(null);
let myChart = null;
const conclusionContent = ref(""); // 响应式变量，用于存储结论内容
const chartData = ref([]); // 响应式变量，用于存储图表数据

const API_ENDPOINT = "http://127.0.0.1:8080/api/tool-org-size/stats";
const CONCLUSION_ENDPOINT = "http://127.0.0.1:8080/api/tool-org-size/conclusion";

// 初始化图表
const initChart = () => {
  if (!chartRef.value) {
    console.error("chartRef.value is null. Please check the ref binding.");
    return;
  }
  myChart = echarts.init(chartRef.value);

  const option = {
    backgroundColor: "#142846",
    title: {
      text: "组织规模与协作工具使用情况",
      left: "center",
      textStyle: {
        color: "#1e90ff",
        fontSize: 18,
        fontWeight: "bold",
        textShadowColor: "#1e90ff88",
        textShadowBlur: 8,
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: { type: "shadow" },
      backgroundColor: "#1e2330",
      borderColor: "#1e90ff",
      textStyle: { color: "#fff" },
      formatter: (params) => {
        const orgSize = params[0].data.orgSize;
        const collaborationTool = params[0].data.collaborationTool;
        const count = params[0].value;
        return `
          <strong>${orgSize}</strong><br/>
          协作工具: ${collaborationTool}<br/>
          使用人数: ${count}
        `;
      },
    },
    xAxis: {
      type: "category",
      data: chartData.value.map(item => item.orgSize),
      axisLabel: { color: "#fff" },
      axisLine: { lineStyle: { color: "#1e90ff" } },
    },
    yAxis: {
      type: "value",
      axisLabel: { color: "#fff" },
      axisLine: { lineStyle: { color: "#1e90ff" } },
      splitLine: { lineStyle: { color: "#1e90ff33" } },
    },
    series: [
      {
        name: "使用人数",
        type: "bar",
        data: chartData.value.map(item => ({
          value: item.count,
          orgSize: item.orgSize,
          collaborationTool: item.collaborationTool.trim(),
        })),
        itemStyle: { color: "#1e90ff" },
        barWidth: "60%",
      },
    ],
  };

  myChart.setOption(option);
};

onMounted(async () => {
  try {
    // 从接口获取图表数据
    const chartResponse = await axios.get(API_ENDPOINT);
    if (chartResponse.data.code === 0) {
      chartData.value = chartResponse.data.data; // 将接口返回的图表数据存储到响应式变量中
      initChart(); // 初始化图表
    } else {
      console.error("图表接口返回错误：", chartResponse.data.message);
    }
  } catch (chartError) {
    console.error("获取图表数据失败：", chartError);
  }

  try {
    // 从接口获取结论内容
    const conclusionResponse = await axios.get(CONCLUSION_ENDPOINT);
    if (conclusionResponse.data.code === 0) {
      conclusionContent.value = conclusionResponse.data.data; // 将接口返回的结论内容存储到响应式变量中
    } else {
      console.error("结论接口返回错误：", conclusionResponse.data.message);
    }
  } catch (conclusionError) {
    console.error("获取结论内容失败：", conclusionError);
  }

  window.addEventListener("resize", resizeChart);
});

function resizeChart() {
  myChart && myChart.resize();
}

onBeforeUnmount(() => {
  window.removeEventListener("resize", resizeChart);
  myChart && myChart.dispose();
});
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 100%;
  margin: 20px auto;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(21, 19, 48, 0.2);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

.chart-container:hover {
  transform: scale(1.02);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

.chart {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.1);
}

.conclusion-box {
  margin-top: 20px;
  padding: 15px;
  width: 90%;
  max-width: 800px;
  background: rgba(20, 40, 70, 0.95);
  border: 2px solid #1e90ff;
  border-radius: 8px;
  color: #fff;
}

.conclusion-box h3 {
  margin-bottom: 10px;
  font-size: 18px;
  color: #1e90ff;
  text-align: center;
}

.conclusion-box div {
  margin: 8px 0;
  line-height: 1.6;
  color: #fff;
  text-align: left;
}
</style>